<template id="arrive_two">
    <div class="chose_one">
        <div class="arrive_two_top">
            <img src="../image/blue_da.png" alt="" @click="get_tui()">
            <h4>选择收货地址</h4>
            <span  style="display:none">新增地址</span>
        </div>

        <div class="arrive_two_container">
            <img src="../image/block_s.jpg" alt="" id="im_gmm">
            <div class="arrive_two_first">
                <!--style=" border-right:0.01rem solid #cccccc;"-->
                <select name="" id="arrive_two_sel_add" >
                    <option v-for="cit in my_city">{{cit}}</option>
                </select>
                <input type="text" placeholder="请输入搜索地址" class="arrive_two_input"  v-model="nar"  v-on:input ="inputFunc(nar)">
                <img src="../image/fa.jpg" alt="" class="arrive_two_kl">
            </div>
        </div>

        <div class="arrive_two_two">
            <ul class="arrive_two_u">
                <li v-for="(nea,index) in near_d"  @click="setaddress(1,nea)" ><img src="../image/an_a.jpg" alt="" >{{nea}}</li>
                <!--<li><img src="../image/an_a.jpg" alt="">展博商务广场</li>-->
            </ul>
        </div>

        <!--地图容器-->
        <div  style="height:0.2rem;width:0.2rem" id="ne" v-show="disp"></div>
    </div>
</template>
<script>
    import BMap from 'BMap'
    export default{
        name: 'arrive_two',
        components:{
        },
        data(){
            return{
                  disp:'',
                  nar:'',
                //附近地址数据
                  near_d:[],
                //请求接口的变量
                b_type:2,
                //城市接口数组
                my_city:[],
                id_type:"",
                nea:[],
                //保存点击获取的地址
                a_adress:'',
                //地址转换成经纬度
                obj_lon:'',
                obj_lat:'',
            }
        },

        mounted:function(){
           // alert(this.$route.query.lo)
          //  alert(this.$route.query.la)
            let h=$(window).height();
            $('.chose_one').height(h);

            //地址的接口
            this.$http.jsonp(
                this.GLOBAL.BaseUrl+'/mobile/api/v1/Position.php?mode=getDispatchCity',
                {
                    params: {
                        type:this.b_type
                    },
                    jsonp:'callback'
                }
            ).then(function (res) {
                if(res.body.code==200){
                    this.my_city=res.body.data.city;
                }
            });

        },
        methods: {
            setaddress(stat,address){
                this.GLOBAL.set_address(stat,address);
                this.$router.push('/recommend')
            },
            //选择搜索地址保存
            secect_city:function(id){
                   //this.id_type=id
                this.a_adress=id;
                let that=this;
                // 百度地图API功能
                var map = new BMap.Map("ne");
                var point = new BMap.Point(116.331398,39.897445);
                map.centerAndZoom(point,12);
                // 创建地址解析器实例
                var myGeo = new BMap.Geocoder();
                // 将地址解析结果显示在地图上,并调整地图视野
                myGeo.getPoint( this.a_adress, function(point){
                    if (point) {
                        map.centerAndZoom(point, 16);
                        that.obj_lon=point.lat;
                        that.obj_lat=point.lng;
                        map.addOverlay(new BMap.Marker(point));
                    }else{
                        //alert("您选择地址没有解析到结果!");
                    }
                }, "上海市");
                //保存地址的接口savePosition
                this.$http.jsonp(
                    this.GLOBAL.BaseUrl+'/mobile/api/v1/Position.php?mode=savePosition',
                    {
                        params: {
                            address:this.a_adress,
                            latitude:this.obj_lon,
                            longitude:this.obj_lat,
                            uid:this.GLOBAL.getCookie('uid'),
                            time:this.GLOBAL.getCookie('time'),
                            token:this.GLOBAL.getCookie('token'),
                            session_id:this.GLOBAL.getCookie('user_cart_id')
                        },
                        jsonp:'callback'
                    }
                ).then(function (res) {
                    if(res.body.code){
                        //this.my_city=res.body.data.city;
                        this.$router.push('/recommend')
                    }
                });
              /* this.$router.push('/chose_add?a_dd='+ this.a_adress+'&ob='+this.odj)*/
             //  alert(this.a_adress);
            },
            get_tui:function(){
                window.history.go(-1);
            },
              inputFunc:function(model){
        //model是input里面改变的值
        // 百度地图API功能
                  let that = this;
                  var map = new BMap.Map("ne");
                  map.centerAndZoom(new BMap.Point(this.$route.query.lo,this.$route.query.la), 11);
                  var options = {
                      onSearchComplete: function(results) {
                          if(local.getStatus() == BMAP_STATUS_SUCCESS) {
                              // 判断状态是否正确
                              var s = [];
                              for(var i = 0; i < results.getCurrentNumPois(); i++) {
                                  s.push(results.getPoi(i).address);
                              }
                              //console.log(s);
                              that.near_d = s
                          }
                      }
                  };
                  var local = new BMap.LocalSearch(map, options);
                  local.search(model);
              }
        }
    };

</script>
<style>
    .arrive_two_u li img{
        display:block;
        position:absolute;
        width:0.28rem;
        height:0.31rem;
        top:0.28rem;
        left:0.18rem;
    }
    .arrive_two_u li:nth-last-of-type{
        border:0;
    }
    .arrive_two_u li{
        list-style:none;
        height:0.79rem;
        line-height:0.79rem;
        color:#a7a7a7;
        font-size:0.24rem;
        text-indent: 0.6rem;
        border-bottom:0.01rem solid #f5f4f2;
        position:relative;
        width:6rem;
        overflow: hidden;;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .arrive_two_u{
        width:100%;
        height:auto;

    }
    .arrive_two_two{
        width:100%;
        height:auto;
        background:#ffffff;
    }
    /*two*/
    .arrive_two_kl{
        position:absolute;
        display:block;
        width:0.26rem;
        height:0.28rem;
        left:2rem;
        top:0.18rem;
    }
    .arrive_two_input{
        float:left;
        display:block;
        width:4.23rem;
        height:0.63rem;
        border:0;
        outline: none;
        background:#f5f4f2;
        text-indent: 0.6rem;
    }
    #arrive_two_sel_add{
        width:1.78rem;
        height:0.63rem;
        border:0;
        background:#f5f4f2;
        outline: none;
        float:left;
        text-indent: 0.4rem;
        /*  padding-top:0.05rem;*/
        /*将默认的select选择框样式清除*/
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
    }
    .arrive_two_first{
        width:6.05rem;
        height:0.63rem;
        background:#f5f4f2;
        margin:0 auto;
        border-radius:0.05rem;
        position:relative;
    }
    .arrive_two_container{
        width:100%;
        height: 0.9rem;
        padding-top:0.3rem;
        background:#ffffff;
        margin-bottom:0.01rem;
        position:relative;
    }
    /*1*/
    .arrive_two_top{
        height:0.8rem;
        width:100%;
        border-bottom:1px solid #f0f0f0;
        position:relative;
        background:#ffffff;
        margin-bottom:0.01rem;
    }
    #im_gmm{
        display:block;
        position:absolute;
        width:0.25rem;
        height:0.17rem;
        top: 0.5rem;
        left: 1.5rem;
        z-index: 5;
    }
    .arrive_two_top img{
        height:0.36rem;
        width:0.36rem;
        display:block;
        position:absolute;
        left:0.25rem;
        top:0.2rem;
    }
    .arrive_two_top h4{
        height:0.8rem;
        color:#2eaffc;
        font-size:0.3rem;
        line-height:0.8rem;
        text-align:center;
        font-weight:normal;
    }
    .arrive_two_top span{
        display:block;
        height:0.8rem;
        line-height: 0.8rem;
        font-size:0.26rem;
        color:#2eaffc;
        position:absolute;
        right:0.24rem;
        top:0;
    }

    .chose_one{
        background:#f5f4f2;
    }
</style>